<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="li3">3 <span>span</span></li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div>
        <div class="div">1</div>
        <div>2</div>
        <div>3</div>
        <div class="div4">4</div>
        <p>6</p>
        <p class="div">7</p>
        <p>8</p>
        <p>9</p>
    </div>

    <script >

        // 选择兄弟元素
        // siblings 选择兄弟元素
        // $('.li3').siblings().css('background-color','red');

        // $('.div4').siblings('.div').css('background-color','red');

        // 父子元素
        // 父
        // $('.li3').parent().css('border','1px solid black')

        // 祖先元素
        // $('.li3').parent(' 选择器')
        
        // // 子元素   >
        // $('ul').children('span').css('color','red');

        // // 子孙元素   空格
        // $('ul').find('span').css('color','red');

        // 条件选择
        // $('ul').children().eq(2).css('color','red');

        // 链式编程
        $('ul').css('border','1px solid black')
            .children().css('color','red').parent()
            .css('width','200px');
    </script>
</body>
</html>